<template>
	<view class="content">
		<view class="panel-header solids-bottom padding-bottom-xs">
			<text class="panel-title text-xl text-bold">获奖</text>
			<text class="panel-edit text-df text-blue"><a @click="editData()">{{edit ? '[完成]' : '[编辑]'}}</a></text>
		</view>
		<view class="panel-content">
			<view v-for="(item,index) in data" :key="index">
				<view class="flex text-lg padding-sm text-left border-bottom">
					<view :class="edit ? 'bg-gray basis-lg' : 'action'">
						<view v-if="!edit" class="flex text-bold word-warp text-left">{{item.name}}</view>
						<view v-if="edit" class=""><input placeholder="获奖比赛及奖项" v-model="item.name" /></view>
					</view>
					<view class="basis-xs flex flex-wrap justify-around align-center" v-if="edit" @click="save(index)">
						<text class="cuIcon-check text-green"></text>
					</view>
					<view class="basis-xs flex flex-wrap justify-around align-center" v-if="edit" @click="remove(index)">
						<text class="cuIcon-delete text-red"></text>
					</view>
				</view>
				<view class="">
				<view class="panel-item flex text-lg padding-sm text-left border-bottom">
					<view class="basis-xs">开始:</view>
					<view :class="edit ? 'bg-gray basis-xl' : 'basis-xl'">
						<view v-if="!edit">{{item.start}}</view>
						<view v-if="edit">
							<picker mode="date" :value="item.start" @change="bindStart" :id="index" fields="month">
								{{item.start}}
							</picker>
						</view>
					</view>
				</view>
				<view class="panel-item flex text-lg padding-sm text-left border-bottom">
					<view class="basis-xs">结束:</view>
					<view :class="edit ? 'bg-gray basis-lg' : 'basis-xl'">
						<view v-if="!edit">{{item.end}}</view>
						<view v-if="edit">
							<picker mode="date" class="basis-xl" :value="item.end" @change="bindEnd" :id="index" fields="month">
								{{item.end}}
							</picker>
						</view>
					</view>
					<view class="basis-xs" v-if="edit">
						<view class="basis-xs text-blue text-center"><a @click="tillNow(index)">[至今]</a></view>
					</view>
				</view>
				<view class="panel-item flex text-lg padding-sm text-left border-bottom">
					<view class="basis-xs">所属单位:</view>
					<view :class="edit ? 'bg-gray basis-xl' : 'basis-xl'">
						<view v-if="!edit">{{item.organization}}</view>
						<view v-if="edit"><input v-model="item.organization" /></view>
					</view>
				</view>
				<view class="panel-item flex text-lg padding-sm text-left border-bottom">
					<view class="basis-xs">身份:</view>
					<view :class="edit ? 'bg-gray basis-xl' : 'basis-xl'">
						<view v-if="!edit">{{item.job}}</view>
						<view v-if="edit">
							<picker @change="bindAwardJob" :id="index" :range="competitionJobRange">
								{{item.job}}
							</picker>
						</view>
					</view>
				</view>
				<view class="panel-item flex text-lg padding-sm text-left border-bottom">
					<view class="basis-xs">详细介绍:</view>
					<view :class="edit ? 'bg-gray basis-xl' : 'basis-xl'">
						<view v-if="!edit" class="word-warp">{{item.detail}}</view>
						<view v-if="edit">
							<textarea style="width: 100%;" class="text-left" v-model="item.detail" maxlength="-1" />
						</view>
					</view>
				</view>
				</view>
			</view>
			<view v-if="edit" class="text-xxl padding-sm text-center">
				<view class="">
					<text class="cuIcon-roundadd text-blue" @click="add()"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				edit: false,
				data: [],
				competitionJobRange: ['组长', '组员']
			}
		},
		created() {
			this.getData();
		},
		methods: {
			editData() {
				if (this.edit) {
					uni.showModal({
						title: '完成',
						content: '请您编辑完内容后单击获奖名称右侧的对勾保存后再确认完成',
						success: (res) => {
							if (res.confirm) {
								this.edit = false;
								for (let i = 0; i < this.data.length; i++) {
									if (this.data[i].new) {
										this.save(i);
									}
								}
							}
						}
					});
				} else {
					this.edit = true;
				}
			},
			bindStart(e) {
				var index = parseInt(e.target.id);
				this.data[index].start = e.target.value;
			},
			bindEnd(e) {
				var index = parseInt(e.target.id);
				this.data[index].end = e.target.value;
			},
			remove(index) {
				uni.showModal({
					title: '删除',
					content: '您确定要删除这一项吗，该项目无法恢复',
					success: (res) => {
						if (res.confirm) {
							var removeID = this.data[index].id;
							if (removeID != "") {
								this.data.splice(index, 1);
								uni.showLoading();
								uni.post("/api/resume/RemoveAward",{ID: removeID},msg => {
									uni.hideLoading();
									if (!msg.success) {
										uni.showToast({
											title: msg.msg
										});
									} else {
										uni.showToast({
											title: '删除成功'
										});
									}
								});
							}
						}
					}
				});
			},
			add() {
				this.data.push({
					name: '',
					start: this.dateToString(new Date()),
					end: this.dateToString(new Date()),
					detail: '',
					job: '组长',
					organization: '',
					id: '',
					new: true
				});
			},
			dateToString(date) {
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				var d = date.getDate();
				return y + '-' + m + '-' + d;
			},
			save(index) {
				uni.showLoading();
				var saveItem = {
					BeginTime: this.data[index].start,
					EndTime: this.data[index].end,
					Name: this.data[index].name,
					DepartName: this.data[index].organization,
					ID: this.data[index].id,
					Description: this.data[index].detail,
					Position: this.data[index].job
				};
				uni.post("/api/resume/SaveAward",{...saveItem},msg => {
					uni.hideLoading();
					if (!msg.success) {
						uni.showToast({
							title: msg.msg
						});
					} else {
						uni.showToast({
							title: '保存成功'
						});
						if (this.data[index].new) {
							this.data[index].new = false;
						}
						setTimeout(() => {
							this.getData();
						}, 1000);
					}
				});
			},
			tillNow(index) {
				this.data[index].end = '至今';
			},
			bindAwardJob(e) {
				var index = parseInt(e.target.id);
				this.data[index].job = this.competitionJobRange[e.target.value];
			},
			getData() {
				uni.showLoading();
				uni.post("/api/resume/GetAwardInfos",{},msg => {
					uni.hideLoading();
					if (msg.success) {
						// console.log(msg);
						var data = [];
						for (let i = 0; i < msg.data.length; i++) {
							data.push({
								start: msg.data[i].BeginTime,
								end: msg.data[i].EndTime,
								name: msg.data[i].Name,
								organization: msg.data[i].DepartName,
								detail: msg.data[i].Description,
								id: msg.data[i].ID,
								job: msg.data[i].Position
							});
						}
						this.data = [];
						this.data = data;
					} else {
						uni.showToast({
							title: msg.msg,
							icon: 'none'
						});
					}
				});
			}
		},
		props: ['external_data'],
		watch: {
			external_data: {
				handler(val, oldVal){
					for (let i = 0; i < val.length; j++) {
						let flag = true;
						for (let j = 0; j < this.data.length; i++) {
							if (val[i].name == this.data[j].name) {
								flag = false;
								this.data[j] = val[i];
								break;
							}
						}
						if (flag) {
							this.data.push(val[i]);
							this.save(this.data.length - 1);
						}
					}
				},
				deep:true
			}
		}
	}
</script>

<style>
	.panel {
		/* width: 100%; */
		margin: 10px;
		padding: 10px;
		height: auto;
	}
	
	.panel-header {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
	}
	
	.word-warp {
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
	}
	
	.border-bottom {
		border-bottom: #eeeeee solid 1px;
	}
</style>
